import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import type { TableColumnCtx } from "element-plus";
import { defineComponent } from "vue";

export default defineComponent({
  setup(): () => JSX.Element {
    const proTable = ref<ProTableInstance>();

    // 新建默认数据
    const initData = reactive({
      reportId: 112
    });

    const columns: ColumnProps<Inventory.ResCustomList>[] = [
      {
        type: "index",
        label: "序号",
        width: 60,
        search: {
          el: "date-picker",
          label: "日期",
          minWidth: 164,
          key: "dataTimeRange",
          defaultValue: formatDate(0, "start", "yyyy-MM-dd"),
          props: {
            type: "date",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD"
          }
        }
      },
      {
        sortable: true,
        prop: "orderNo",
        label: "订单号",
        width: 150,
        align: "left"
      },
      {
        sortable: true,
        prop: "statusName",
        label: "订单状态",
        width: 110,
        align: "left"
      },
      {
        sortable: true,
        prop: "storeName",
        label: "门店名称",
        width: 150
      },
      {
        sortable: true,
        prop: "sumQuantity",
        label: "数量",
        width: 80
      },
      {
        sortable: true,
        prop: "sumAmount",
        label: "单据应收金额",
        width: 140
      },
      {
        sortable: true,
        prop: "sumRealAmount",
        label: "单据实收金额",
        width: 140
      },
      {
        sortable: true,
        prop: "sumTaskAmount",
        label: "做法金额",
        width: 120
      },
      {
        sortable: true,
        prop: "sumFeedAmount",
        label: "加料金额",
        width: 120
      },
      {
        sortable: true,
        prop: "sumReduceAmount",
        label: "优惠金额",
        width: 120
      },
      {
        sortable: true,
        prop: "sumAllAmount",
        label: "小计",
        width: 100
      },
      {
        sortable: true,
        prop: "mobile",
        label: "电话号码",
        fixed: false,
        width: 120
      },
      {
        sortable: true,
        prop: "orderTypeName",
        label: "订单类型",
        fixed: false,
        width: 120
      },
      /*     {
        name: "deskId",
        label: "桌号id",
        fixed: false,
      }, */
      {
        sortable: true,
        prop: "deskName",
        label: "桌位名称",
        fixed: false,
        width: 120
      },
      {
        sortable: true,
        prop: "memberNumber",
        label: "会员卡号",
        width: 130
      },
      // {
      //    sortable: true,prop: "userName",
      //   label: "用户名",
      //   width: 130
      // },

      {
        sortable: true,
        prop: "sysUserName",
        label: "操作员名称",
        width: 140
      },

      {
        sortable: true,
        prop: "person",
        label: "就餐人数",
        width: 120
      },

      {
        sortable: true,
        prop: "deskCategoryName",
        label: "桌台区域名称",
        width: 140
      }
      // { prop: "storeName", label: "门店名称", minWidth: 120, align: "left" }
    ];

    // 合计
    interface SummaryMethodProps<T = any> {
      columns: TableColumnCtx<T>[];
      data: T[];
    }
    const summary = ref<any[]>([]);
    const dataCallback = (data: any) => {
      // console.log(data);
      summary.value = data.summary;
      return {
        list: data.list,
        total: data.total,
        pageNum: data.pageNum,
        pageSize: data.pageSize
      };
    };

    const getSummaries = (param: SummaryMethodProps) => {
      return summary.value;
    };

    return () => (
      <div class="table-box">
        <ProTable
          ref={proTable}
          title="历史账单"
          row-key="id"
          columns={columns}
          request-api={getPageReport}
          init-param={initData}
          summary-method={getSummaries}
          data-callback={dataCallback}
        ></ProTable>
      </div>
    );
  }
});
